<template>
    <el-row>
        <el-col :span="13">
            <el-card>
                <el-form-item style="float: right;">
                    <el-button type="primary" style="margin-top: 10px;" @click="getLoginInfo" plain>修改信息</el-button>
                </el-form-item>
                <div style="width: 700px; height: 600px;">
                    <el-descriptions title="管理员个人信息" direction="vertical" border style="margin-top: 20px">
                        <el-descriptions-item :rowspan="2" :width="140" label="头像" align="center">
                            <el-image style="width: 400px; height: 400px"
                                :src="imageUrlUpdate" />
                        </el-descriptions-item>
                        <el-descriptions-item align="center" label="用户名">{{information.iname}}</el-descriptions-item>
                        <el-descriptions-item align="center" label="电话">{{information.iphone}}</el-descriptions-item>
                        <el-descriptions-item align="center" label="开发人员联系方式">二维码</el-descriptions-item>
                    </el-descriptions>
                </div>
            </el-card>
        </el-col>
    </el-row>

    <!-- 修改对话框开始 -->
    <el-dialog v-model="updateShow" title="修改员工" width="500">
        <el-form>
            <el-form-item label="头像" label-width="20%">
                <el-upload class="avatar-uploader" action="http://localhost:8080/admin/upload" name="pic"
                    :headers="headers" :show-file-list="false" :before-upload="beforeAvatarUpload"
                    :on-success="handleAvatarSuccessUpdate">
                    <img :src="imageUrlUpdate" class="avatar" />
                </el-upload>
            </el-form-item>
            <el-form-item label="用户名" label-width="20%">
                <el-input v-model="updateInformation.iname" autocomplete="off" style="width: 300px" />
            </el-form-item>
            <el-form-item label="电话" label-width="20%">
                <el-input v-model="updateInformation.iphone" autocomplete="off" style="width: 300px" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="updateShow = false">
                    取消
                </el-button>
                <el-button type="primary" @click="update">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 修改对话框结束 -->
</template>


<script setup>
import { computed, ref } from 'vue';
import adminApi from '@/api/admin';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useTokenStore } from '@/stores/token';

const tokenStore = useTokenStore();
//修改信息
const updateInformation = ref({
    iid:'',
    iname:'',
    iavatar:'',
    iphone:''
})
const information = ref('');
//修改对话框的状态
const updateShow = ref(false);

const imageUrlUpdate = ref("");
//计算属性
const headers = computed(() => {
    let token = tokenStore.tokenStr;
    return {
        token
    }
})

//修改
function update() {
    adminApi.updateInfo(updateInformation.value)
    .then(resp => {
      if (resp.code == 10000) {
        ElMessage({
          message: resp.msg,
          type: 'success',
          duration: 1500
        })
        refreshCurrentPage();
        updateShow.value = false;
      } else {
        ElMessage({
          message: resp.msg,
          type: 'error',
          duration: 1500
        });
      }
    })

}

//参数表示选中的图片
function beforeAvatarUpload(rawFile) {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('图片格式有误')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('图片不能超过2M!')
        return false
    }
    return true
}
//修改上传之后的回调
function handleAvatarSuccessUpdate(resp, uploadFile) {
    if (resp.code == 10000) {
        ElMessage.success(resp.msg);
        imageUrlUpdate.value = "http://localhost:8080/upload/" + resp.data;
        updateInformation.value.iavatar = resp.data;
    }
}

function getLoginInfo() {
    adminApi.getLoginInfo()
        .then(resp => {
            updateInformation.value = resp.data;
            imageUrlUpdate.value = "http://localhost:8080/upload/" + resp.data.iavatar
            updateShow.value=true;
        })
}

function LoginInfo() {
    adminApi.getLoginInfo()
        .then(resp => {
            information.value = resp.data;
            imageUrlUpdate.value = "http://localhost:8080/upload/" + resp.data.iavatar
        })
}
//刷新界面
function refreshCurrentPage() {
    location.reload();
}
LoginInfo();

</script>
<style scoped>
.avatar-uploader,
.avatar {
  width: 178px;
  height: 178px;
  display: block;
  border: 1px dotted #dcdfe6;
  border-radius: 5px;
}
</style>